<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-16 14:30
  PageName：h_practice8_Newspaper.html
  Function：实战案例 - 设置中文报刊版式
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/h_practice8_Newspaper.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设置中文报刊版式</title>

    <style type="text/css">
        /* 定义网页基本属性 */
        body {
            background: #fff;      /* 背景色 */
            color: #000;           /* 前景色 */
            font-size: 0.875em;    /* 网页字体大小 */
            font-family: "新宋体", Arial, Helvetica, sans-serif;  /* 网页字体默认类型 */
        }

        /* 定义标题样式 */
        h1, h2, h3 {
            text-align: center;  /* 居中对齐 */
            margin-bottom: 1em;  /* 定义底边界 */
        }

        /* 个性化二级标题样式 */
        h2 {
            color: #666;                  /* 字体颜色 */
            text-decoration: underline;   /* 下划线 */
        }

        /* 个性化三级标题样式 */
        h3 {
            letter-spacing: 0.4em;   /* 字距 */
            font-size: 1.4em;        /* 字体大小 */
        }

        /* 统一段落文本样式 */
        p {
            margin: 0;           /* 清除段距 */
            line-height: 1.8em;  /* 定义行高 */
        }

        /* 首字下沉样式 */
        .first:first-letter {
            font-size: 50px;    /* 字体大小 */
            float: left;        /* 向左浮动显示 */
            margin-right: 6px;  /* 增加右侧边距 */
            padding: 2px;       /* 增加首字四周的补白 */
            font-weight: bold;  /* 加粗字体 */
            line-height: 1em;   /* 定义行距为一个字体大小，避免行高影响段落版式 */
            background: #000;   /* 背景色 */
            color: #fff;        /* 前景色 */
        }

        /* 第1文本块样式 */
        #quickSummary {
            margin-left: 4em;  /* 左缩进 */
            margin-right: 4em; /* 右缩进 */
        }

        /* 第1文本块的第1段样式 */
        #quickSummary .p1 {
            color: #444;    /* 字体颜色 */
        }

        /* 第1文本块的第2段样式 */
        #quickSummary .p2 {
            text-align: right;   /* 右对齐 */
        }

        /* 除了首字下沉段以外的段落样式 */
        #quickSummary .p1, .p2, .p3 {
            text-indent: 2em;   /* 首行缩进 */
        }

        a {
            color: #222;
        }

        a:hover {
            color: #000;
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div id="intro">
    <div id="pageHeader">
        <h1>
            <span>CSS Zen Garden</span>
        </h1>

        <h2>
            <span><acronym title="cascading style sheets">CSS</acronym>设计之美</span>
        </h2>
    </div>

    <div id="quickSummary">
        <p class="p1">
            <span>展示以<acronym title="cascading style sheets">CSS</acronym>
                技术为基础，并提供超强的视觉冲击力。只要选择列表中任意一个样式表，就可以将它加载到本页面中，并呈现不同的设计效果。
            </span>
        </p>

        <p class="p2">
            <span>下载
                <a title="这个页面的HTML源代码不能够被改动。" href="http://www.csszengarden.com/zengarden-sample.html">HTML文档</a>
                和
                <a title="这个页面的CSS样式表文件，你可以更改它。" href="http://www.csszengarden.com/zengarden-sample.css">CSS文件</a>。
            </span>
        </p>
    </div>

    <div id="preamble">
        <h3>
            <span>启蒙之路</span>
        </h3>

        <p class="p1 first">
            <span>不同浏览器随意定义标签，导致无法相互兼容的
                <acronym title="document object model">DOM</acronym>结构，或者提供缺乏标准支持的
                <acronym title="cascading style sheets">CSS</acronym>等陋习随处可见，如今当使用这些不兼容的标签和样式时，设计之路会一路坎坷。
            </span>
        </p>

        <p class="p2">
            <span>现在，我们必须清除以前为了兼容不同浏览器而使用的一些过时的小技巧。感谢
                <acronym title="world wide web consortium">W3C</acronym>、
                <acronym title="web standards project">WASP</acronym>等标准组织，以及浏览器厂家和开发师们的不懈努力，我们终于能够进入Web设计的标准时代。
            </span>
        </p>

        <p class="p3">
            <span>CSS ZenGarden（样式表禅意花园）邀请您发挥自己的想象力，构思一个专业级的网页。让我们用慧眼来审视，充满理想和激情去学习CSS这个不朽的技术，最终使自己能够达到技术和艺术合而为一的最高境界。
            </span>
        </p>
    </div>
</div>
</body>
</html>